<template>
  <el-select ref="select" :value="value" :multiple="multiple" clearable filterable remote
    :reserve-keyword="true" default-first-option :placeholder="$tt('tip_input_key')" :loading="loading" v-bind="$attrs"
    v-on="$listeners" @input="input">
    <el-option v-for="item in options" :key="item" :label="item" :value="item">
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: null,
    currentLabel: "",


    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      options: [],
      remoteQuery: "",
      loading: false,
      option: { label: item => this.$formatNameCode(item.customerName, item.customerCode), value: 'customerId' },
    }
  },
  mounted() {
    this.remoteNet()
    if (this.currentLabel) {
      this.$nextTick(() => {
        this.$refs.select.selectedLabel = this.currentLabel
      })
    }
  },
  watch: {
    currentLabel: function (val) {
      this.$nextTick(() => {
        this.$refs.select.selectedLabel = val
      })
    },
    remoteQuery: function (newVal) {
      this.remoteNet(newVal)
    }
  },
  methods: {
    input(e) {
      const item = _.find(this.options, it => it[this.option.value] == e)
      this.$emit('changeItem', item)
    },
    remoteMethod: _.debounce(function (query) {
      this.remoteQuery = query ? query : ""
    }, 700),

    remoteNet(query) {
      this.loading = true
      let data = {}
      if (query) data.keyword = query.trim()
      this.$ajax({
        url: "/wms-api/inbound/WmsInboundScheduleRpc/selectTransitNo.json",
        method: 'post',
        data,
        tip: false,
        success: (res) => {
          this.options = res.data.rows
        },
        failure: () => {
        },
        complete: () => {
          this.loading = false
        }
      })
    }

  },
}
</script>

<style scoped></style>
